<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#l-map{height:97%;width:100%;}
    .tooldiv {height: 3%;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9EGzpMNGnOWGUsK1XLVhjZMvhKlqI8HA"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
	<title>关键字输入提示词条</title>
</head>
<body>
  <div class="tooldiv">
  	不跳的:<input type="text" id="suggestId" value="百度" style="width:20%;"/>
  	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

  	跳起来:<input type="text" id="suggestId1" size="20" value="百度" style="width:20%;"/>
  	<div id="searchResultPanel1" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    <button onclick="onDisClick()">测距离</button>

    <input type="button" value="清除" onclick="clearAll()"/>
  </div>
  <div id="l-map"></div>
</body>
</html>
<script type="text/javascript">

	// 百度地图API功能
	var map = new BMap.Map("l-map");
  map.enableScrollWheelZoom(true);
  map.centerAndZoom("北京西三旗上奥世纪A座",20);
  var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
  map.addControl(top_left_control);
	map.addControl(top_left_navigation);

  var overlays = [];
	var overlaycomplete = function(e){
      overlays.push(e.overlay);
  };
  var styleOptions = {
      strokeColor:"red",    //边线颜色。
      fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
      strokeWeight: 3,       //边线的宽度，以像素为单位。
      strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
      fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
      strokeStyle: 'solid' //边线的样式，solid或dashed。
  }
  //实例化鼠标绘制工具
  var drawingManager = new BMapLib.DrawingManager(map, {
      isOpen: false, //是否开启绘制模式
      enableDrawingTool: true, //是否显示工具栏
      drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
          offset: new BMap.Size(5, 5), //偏离值
      },
      circleOptions: styleOptions, //圆的样式
      polylineOptions: styleOptions, //线的样式
      polygonOptions: styleOptions, //多边形的样式
      rectangleOptions: styleOptions //矩形的样式
  });
 //添加鼠标绘制工具监听事件，用于获取绘制结果
  drawingManager.addEventListener('overlaycomplete', overlaycomplete);
  function clearAll() {
	for(var i = 0; i < overlays.length; i++){
          map.removeOverlay(overlays[i]);
      }
      overlays.length = 0
  }

  var ctrl = new BMapLib.TrafficControl({
		showPanel: false //是否显示路况提示面板
	});
	map.addControl(ctrl);
	ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

  function onDisClick() {
    var myDis = new BMapLib.DistanceTool(map);
    myDis.open();  //开启鼠标测距
    //myDis.close();  //关闭鼠标测距大
  }

	function G(id) {
		return document.getElementById(id);
	}

  var removeMarker = function(e,ee,marker){
		map.removeOverlay(marker);
	}

  var g_pts = []

  function add_marker(pt, animation) {
    var marker = new BMap.Marker(pt)
    map.addOverlay(marker);
    if (animation) {
      marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    }
    //创建右键菜单
  	var markerMenu=new BMap.ContextMenu();
  	markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));

  	marker.addContextMenu(markerMenu);
  }

  function setPlace(myValue, save){
		//map.clearOverlays();    //清除地图上所有覆盖物

		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
      add_marker(pp, !save)

      for (let pt in g_pts) {
        //var pp = new BMap.Point(sw.lng + lngSpan * (Math.random()
        add_marker(g_pts[pt], false)
      }

      if (save) {
        //g_pts.push(pp)
      }
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}

  function add_event(searchResultPanel, suggestId, save) {
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
  		{"input" : suggestId
  		,"location" : map
  	});
    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
  	  var str = "";
  		var _value = e.fromitem.value;
  		var value = "";
  		if (e.fromitem.index > -1) {
  			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  		}
  		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

  		value = "";
  		if (e.toitem.index > -1) {
  			_value = e.toitem.value;
  			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  		}
  		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  		G(searchResultPanel).innerHTML = str;
  	});

    var myValue;
  	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
  	var _value = e.item.value;
  		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  		G(searchResultPanel).innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

  		setPlace(myValue, save);
  	});
  }

  add_event('searchResultPanel', 'suggestId', true)
  add_event('searchResultPanel1', 'suggestId1', false)

</script>
